{% extends 'base.html' %}

{% block title %}
  首页
{% endblock %}

{% block hero %}
  {#主页#}
  <section class="hero">
    <div class="container">
      <h2>探索前沿技术，分享编程智慧</h2>
      <p>TechSphere 是一个武汉大学新生开发的技术博客Demo，分享相关的技术文章、教程和实践经验</p>
      <form action="{% url 'blog:search' %}" method="GET">
        <div class="search-bar">
          <input type="text" name="q" placeholder="搜索技术文章、教程...">
          <button><i class="fas fa-search"></i> 搜索</button>
        </div>
      </form>
    </div>
  </section>
{% endblock %}

{% block main %}

  {# 显示最新文章 #}
  <main class="articles-container">
    <h2 class="section-title">最新文章</h2>



    <div class="articles-grid">
      {% for blog in blogs %}

        <article class="article-card">

          {#一个不明觉厉的图标#}
          <div class="article-img">
            <i class="fab fa-react"></i>
          </div>

          <div class="article-content">


            <div class="article-meta">
              {# 日期与评论数 #}
              <span><i class="far fa-calendar"></i> {{ blog.pub_time }}</span>
              <span><i class="far fa-comment"></i> {{ blog.comments.all|length }}</span>
            </div>

            {# 标签 #}
            <div class="article-tag">{{ blog.category.name }}</div>


            {# 标题 #}
            <h3 class="article-title"><a href="{% url 'blog:detail' blog_id=blog.id %}">{{ blog.title }}</a></h3>

            {# 正文 #}
            <p class="article-excerpt">{{ blog.content|truncatechars:40 }}</p>

            {# 链接跳转 #}
            <a href="{% url 'blog:detail' blog_id=blog.id %}" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></a>


          </div>
        </article>

      {% endfor %}

    </div>
  </main>

{% endblock %}